<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>原生JS实现图片爆炸特效</title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    #boom {
      width: 640px;
      height: 400px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin: -200px 0 0 -320px;
      border: 1px solid black;
    }

    #boom_node {
      width: 100%;
      height: 100%;
      position: absolute;
    }

    #boom_node>div {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  </style>
</head>

<body>
  <div id='boom'>
    <div id='boom_node'></div>
  </div>
  <script type="text/javascript">

    var index = 0;
    var zIndex = 9999999;

    //本地图片路径
    var arr = ['images/0.jpg', 'images/1.jpg', 'images/2.jpg'];
    var imgIndex = 0;

    function random(min, max) {
      return parseInt(min + Math.random() * (max - min));
    }

    show(10, 8);

    function show(x, y) {
      var R = x;
      var T = y;
      //爆炸前生成下一张图片
      var oDiv2 = document.createElement('div');
      oDiv2.id = 'l' + index;
      oDiv2.style.zIndex = zIndex;
      //让下一张图片位于爆作图之下
      zIndex--;
      index++;

      //如果三张不同的图片切换完，切换到第一张
      if (imgIndex == arr.length) {
        imgIndex = 0
      };
      boom_node.appendChild(oDiv2);

      //按数量生成小格子
      for (var i = 0; i < T; i++) {
        for (var j = 0; j < R; j++) {
          var oDiv = document.createElement('div');
          //给小格子生成宽高
          oDiv.style.width = boom_node.offsetWidth / R + 'px';
          oDiv.style.height = boom_node.offsetHeight / T + 'px';
          //浮动生成大的div
          oDiv.style.float = 'left';
          //背景及背景定位
          oDiv.style.background = 'url(' + arr[imgIndex] + ')';
          oDiv.style.backgroundPositionX = -j * (boom_node.offsetWidth / R) + 'px';
          oDiv.style.backgroundPositionY = -i * (boom_node.offsetHeight / T) + 'px';
          //随机延迟过渡
          oDiv.style.transition = (1.3 + Math.random() * 0.5) + 's all ease ' +
            (0.1 + Math.random() * 0.16) + 's';
          document.getElementById('l' + (index - 1)).appendChild(oDiv);
        }
      };
      //切换到下一张
      imgIndex++;
      //2秒后图片爆炸及消失
      setTimeout(function () {
        var allDiv = document.getElementById('l' + (index - 1)).children;
        for (var i = 0; i < allDiv.length; i++) {
          //爆炸
          allDiv[i].style.transform = 'perspective(800px) rotateX(' + random(-190, 191) + 'deg) rotateY(' + random(-190, 191) + 'deg) scale(' + (1.5 + Math.random() * 0.6) + ') translateX(' + random(-300, 301) + 'px) translateY(' + random(-300, 301) + 'px) rotate(' + random(-190, 191) + 'deg)';
          //消失
          allDiv[i].style.opacity = 0;

        };
        //自调函数,让爆炸之前底部切换到下一张
        show(x, y);
        //清除爆炸后小div的占位
        setTimeout(function () {
          //底层ID为'l+(index+0)',未爆炸为'l+(index+1)',已爆炸为'l+(index+2)'
          boom_node.removeChild(document.getElementById('l' + (index - 2)))

        }, 1800);


      }, 2000);
    }
  </script>
</body>

</html>